<template>
  <view class="page-warp">
    <navbar title="政策详情"></navbar>
    <view class="content-warp" >
      <view class="top-warp">
        <view class="title">{{information.title}}</view>
        <view class="time"></view>
      </view>
      <view class="main">
        <view class="text" v-html="information.content"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onMounted ,ref } from 'vue';
  import navbar from '@/components/navbar/navbar.vue';
  import { detaile } from '../../api/index/output';
  const policyId = ref("");
  const information=ref({})
  onMounted(()=>{
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const {id} = currentPage.options;
    policyId.value = String(id);
    policyDetail(policyId.value);
  })
  const policyDetail = (id) =>{
    detaile(id).then((res)=>{
      if(res.code === 200){
        information.value = res.data;
      }
    })
  }
</script>

<style lang="scss" scoped>
  .page-warp{
    .content-warp{
      padding:64rpx 30rpx 0 30rpx;
      .top-warp{
        border-bottom: 1rpx solid #9ca3af;
        margin-bottom: 30rpx;
        .title{
          font-size: 42rpx;
          font-weight: bolder;
          line-height: 60rpx;
          margin-bottom: 30rpx;
        }
        .time{
          line-height: 46rpx;
          font-size: 28rpx;
          color: #9ca3af;
        }
      }
      .main{
        .text{
          font-size: 28rpx !important;
          text-align: 1.1;
          padding: 30rpx 10rpx;
          box-sizing: border-box;
        }
      }
    }
  }
</style>
